{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" href="SHOP_CSS/index.css">
{/block}
{block name="main"}
<div class="ns-survey">
	<div class="">
		<div class="ns-survey-title">
			<span class="ns-survey-title-name">实时概况</span>
			<span class="ns-survey-title-time">更新时间：{:date('Y-m-d H:i:s')}</span>
		</div>
		<div class="admin-row layui-col-space20">
			<div class="layui-col-md2">
				<a href="{:addon_url('shop/order/lists')}#!order_status=0">
					<div class="ns-survey-detail-con">
						<div class="statistics-box">
							<div class="statistics-title">待付款订单</div>
							<div class="statistics-value ns-text-color num_data_waitpay">0</div>
						</div>
					</div>
				</a>
			</div>
			<div class="layui-col-md2">
				<a href="{:addon_url('shop/order/lists')}#!order_status=1">
					<div class="ns-survey-detail-con">
						<div class="statistics-box">
							<div class="statistics-title">待配货订单</div>
							<div class="statistics-value ns-text-color num_data_waitsend">0</div>
						</div>
					</div>
				</a>
			</div>
			<div class="layui-col-md2">
				<a href="{:addon_url('shop/orderrefund/lists')}">
					<div class="ns-survey-detail-con">
						<div class="statistics-box">
							<div class="statistics-title">退款中订单</div>
							<div class="statistics-value ns-text-color num_data_refund">0</div>
						</div>
					</div>
				</a>
			</div>
			<div class="layui-col-md2">
				<a href="{:addon_url('shop/goods/lists')}">
					<div class="ns-survey-detail-con">
						<div class="statistics-box">
							<div class="statistics-title">库存预警</div>
							<div class="statistics-value ns-text-color num_data_goods_stock_alarm">0</div>
						</div>
					</div>
				</a>
			</div>
			<div class="layui-col-md2">
				<a href="{:addon_url('shop/community/leaderApplyList')}">
					<div class="ns-survey-detail-con">
						<div class="statistics-box">
							<div class="statistics-title">团长申请</div>
							<div class="statistics-value ns-text-color num_data_leader_apply_count">0</div>
						</div>
					</div>
				</a>
			</div>
			<div class="layui-col-md2">
				<a href="{:addon_url('shop/memberwithdraw/lists')}">
					<div class="ns-survey-detail-con">
						<div class="statistics-box">
							<div class="statistics-title">提现申请（元）</div>
							<div class="statistics-value ns-text-color num_data_balance_withdraw_apply">0.00</div>
						</div>
					</div>
				</a>
			</div>
		</div>

		<div class="admin-row layui-col-space20">
			<div class="admin-col-md2">
				<div class="">
					<div class="overview-box">
						<div class="overview-title">
							<div class="overview-title-text">今日订单数</div>

							<div class="title ns-prompt-block overview-prompt">
								<div class="ns-prompt">
									<button class="layui-btn layui-btn-primary ns-text-color ns-border-color ns-survey-yesterday-btn">昨日</button>
									<div class="ns-prompt-box">
										<div class="ns-prompt-con">
											昨日订单数：<span class="stat_yesterday_order_pay_count"><span>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="overview-con">
							<div class="overview-value ns-text-color stat_day_order_pay_count">0</div>
							<div class="overview-rate">
								<div>日同比
									<span class="day_rate_order_pay_count"></span>
									<img src="SHOP_IMG/shop-rate-add.png" class="add">
									<img src="SHOP_IMG/shop-rate-less.png" class="less layui-hide">
								</div>

								<div>昨日订单数：<span class="stat_yesterday_order_pay_count">0</span></div>
							</div>

							<div class="overview-bottom">
								<div class="overview-bottom-text">订单总数</div>
								<div class="overview-bottom-value total_data_order_pay_count">0</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="admin-col-md2">
				<div class="">
					<div class="overview-box">
						<div class="overview-title">
							<div class="overview-title-text">今日销售额</div>

							<div class="title ns-prompt-block overview-prompt">
								<div class="ns-prompt">
									<button class="layui-btn layui-btn-primary ns-text-color ns-border-color ns-survey-yesterday-btn">昨日</button>
									<div class="ns-prompt-box">
										<div class="ns-prompt-con">
											昨日销售额：<span class="stat_yesterday_order_total">0.00</span>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="overview-con">
							<div class="overview-value ns-text-color stat_day_order_total">
								0.00
							</div>
							<div class="overview-rate">
								<div>日同比
									<span class="day_rate_order_total">0%</span>

									<img src="SHOP_IMG/shop-rate-add.png" class="add">
									<img src="SHOP_IMG/shop-rate-less.png" class="less layui-hide">
								</div>

								<div>昨日销售额：<span class="stat_yesterday_order_total">0.00</span></div>
							</div>

							<div class="overview-bottom">
								<div class="overview-bottom-text">销售总额</div>
								<div class="overview-bottom-value total_data_order_total">0.00</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="admin-col-md2">
				<div class="">
					<div class="overview-box">
						<div class="overview-title">
							<div class="overview-title-text">今日新增会员</div>

							<div class="title ns-prompt-block overview-prompt">
								<div class="ns-prompt">
									<button class="layui-btn layui-btn-primary ns-text-color ns-border-color ns-survey-yesterday-btn">昨日</button>
									<div class="ns-prompt-box">
										<div class="ns-prompt-con">
											昨日新增会员：<span class="stat_yesterday_member_count">0</span>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="overview-con">
							<div class="overview-value ns-text-color stat_day_member_count">0</div>
							<div class="overview-rate">
								<div>日同比
									<span class="day_rate_member_count">0%</span>

									<img src="SHOP_IMG/shop-rate-add.png" class="add">
									<img src="SHOP_IMG/shop-rate-less.png" class="less layui-hide">
								</div>

								<div>昨日新增会员：<span class="stat_yesterday_member_count">0</span></div>
							</div>

							<div class="overview-bottom">
								<div class="overview-bottom-text">会员总数</div>
								<div class="overview-bottom-value total_data_member_count">0</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="admin-col-md2">
				<div class="">
					<div class="overview-box">
						<div class="overview-title">
							<div class="overview-title-text">今日新增团长</div>

							<div class="title ns-prompt-block overview-prompt">
								<div class="ns-prompt">
									<button class="layui-btn layui-btn-primary ns-text-color ns-border-color ns-survey-yesterday-btn">昨日</button>
									<div class="ns-prompt-box">
										<div class="ns-prompt-con">
											昨日新增团长：<span class="stat_yesterday_leader_count">0</span>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="overview-con">
							<div class="overview-value ns-text-color stat_day_leader_count">0</div>
							<div class="overview-rate">
								<div>日同比
									<span class="day_rate_leader_count">0%</span>
									<img src="SHOP_IMG/shop-rate-add.png" class="add">
									<img src="SHOP_IMG/shop-rate-less.png" class="less layui-hide">
								</div>

								<div>昨日新增团长：<span class="stat_yesterday_leader_count">0</span></div>
							</div>

							<div class="overview-bottom">
								<div class="overview-bottom-text">团长总数</div>
								<div class="overview-bottom-value total_data_leader_count"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="admin-row layui-col-space20">
			<div class="admin-col-md4">
				<div class="ns-survey-detail-con echarts-wrap">
					<div class="echarts-order">
						<h5>订单数量</h5>
						<div id="order" style="width: 100%; height: 300px;"></div>
					</div>
				</div>
			</div>
			<div class="admin-col-md4">
				<div class="ns-survey-detail-con echarts-wrap">
					<div class="echarts-money">
						<h5>订单销售额(元)</h5>
						<div id="money" style="width: 100%; height: 300px;"></div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="admin-row layui-col-space20">
			<div class="admin-col-md4">
				<div class="ns-survey-detail-con echarts-wrap">
					<div class="echarts-order">
						<h5>新增会员数</h5>
						<div id="member" style="width: 100%; height: 300px;"></div>
					</div>
				</div>
			</div>
			<div class="admin-col-md4">
				<div class="ns-survey-detail-con echarts-wrap">
					<div class="echarts-money">
						<h5>新增团长数</h5>
						<div id="team" style="width: 100%; height: 300px;"></div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="admin-row layui-col-space20">
			<div class="admin-col-md4 leader-echarts">
				<div class="ns-survey-detail-con echarts-wrap">
					<div class="echarts-order">
						<h5>团长销售排行(团长销售金额排行)</h5>
						<div id="team_money" style="width: 100%; height: 320px;"></div>
					</div>
				</div>
			</div>
			<div class="admin-col-md4 goods-echarts">
				<div class="ns-survey-detail-con echarts-wrap">
					<div class="echarts-money">
						<h5>商品销售排行(商品销售数量排行)</h5>
						<div id="goods_money" style="width: 100%; height: 320px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script src="SHOP_JS/echarts.min.js"></script>
<script>
	$(function() {
		$("body").on("click", ".ns-shop-state button", function() {
			location.href = ns.url("shop/index/renewExpireTime");
		});
		getNumData();
		getTodayData();
		tenDayStat();
		randStat();
	})

	function getDay(day) {
		var today = new Date();
		var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
		today.setTime(targetday_milliseconds); //注意，这行是关键代码
		var tYear = today.getFullYear();
		var tMonth = today.getMonth();
		var tDate = today.getDate();
		tMonth = doHandleMonth(tMonth + 1);
		tDate = doHandleMonth(tDate);
		return tMonth + "-" + tDate;
	}
	function doHandleMonth(month) {
		var m = month;
		if (month.toString().length == 1) {
			m = "0" + month;
		}
		return m;
	}

	/**
	 * 概况数量信息
	 */
	function getNumData(){
		$.ajax({
			type: 'POST',
			dataType: 'JSON',
			url: ns.url("shop/index/getNumData"),
			success: function(res) {
				if (res.code >= 0) {
					$.each(res.data, function(i, e){
						$('.num_data_'+i).text(e);
					})
				}
			}
		});
	}

	/**
	 * 概况今日信息
	 */
	function getTodayData(){
		$.ajax({
			type: 'POST',
			dataType: 'JSON',
			url: ns.url("shop/index/getTodayData"),
			success: function(res) {
				if (res.code >= 0) {
					$.each(res.data, function(key, item){
						$.each(item, function(i, e){
							if($('div,span').is('.'+key+'_'+i)){
								$('.'+key+'_'+i).text(e);
								if(key == 'day_rate' && parseFloat(e) >= 0){
									$('.'+key+'_'+i).parent().find('.less').addClass('layui-hide')
									$('.'+key+'_'+i).parent().find('.add').removeClass('layui-hide')
								}
								if(key == 'day_rate' && parseFloat(e) < 0){
									$('.'+key+'_'+i).parent().find('.add').addClass('layui-hide')
									$('.'+key+'_'+i).parent().find('.less').removeClass('layui-hide')
								}
							}
						})
					})
				}
			}
		});
	}

	var data = [getDay(-9), getDay(-8), getDay(-7), getDay(-6), getDay(-5), getDay(-4), getDay(-3), getDay(-2), getDay(-1), getDay(0)];

	var init_data = [0,0,0,0,0,0,0,0,0,0];

	/**
	 * 十天内数据统计
	 */
	function tenDayStat() {
		//订单数量
		var orderNumChart = echarts.init(document.getElementById('order'));
		var numOption = {
			xAxis: {
				type: 'category',
				data: data
			},
			yAxis: {
				type: 'value'
			},
			tooltip: {
				formatter: function(params, ticket, callback) {
					return "日期：" + data[params.dataIndex] + '<br />' + params.seriesName + "：" + params.value;
				},
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				}
			},
			series: [{
				name: ['订单数'],
				data: init_data,
				type: 'bar',
				showBackground: true,
				barCategoryGap: '70%',
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1,
							[{
								offset: 1,
								color: '#70B0FF'
							}, {
								offset: 0,
								color: '#C688FF'
							}]
					)
				}
			}]
		};
		orderNumChart.setOption(numOption);

 		//订单金额
		var moneyChart = echarts.init(document.getElementById('money'));
		var moneyOption = {
			xAxis: {
				type: 'category',
				data: data
			},
			yAxis: {
				type: 'value'
			},
			tooltip: {
				trigger: 'axis',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: function(params, ticket, callback) {
					return "日期：" + params[0].axisValue + '<br />' + params[0].seriesName + "：" + params[0].value + "元";
				},
			},
			series: [{
				name: ['销售额'],
				data: init_data,
				type: 'line',
				symbol: 'circle',
				smooth: false,
				itemStyle: {
					color: '#FF2306'
				},
				lineStyle: {
					color: '#FF6706'
				}
			}]
		};
		moneyChart.setOption(moneyOption);

		//新增团长
		var teamChart = echarts.init(document.getElementById('team'));
		// 指定图表的配置项和数据
		var teamOption = {
			xAxis: {
				type: 'category',
				data: data
			},
			yAxis: {
				type: 'value'
			},
			tooltip: {
				trigger: 'axis',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: function(params, ticket, callback) {
					return "日期：" + params[0].axisValue + '<br />' + params[0].seriesName + "：" + params[0].value;
				},
			},
			series: [{
				name: ['新增团长数'],
				data: init_data,
				type: 'line',
				symbol: 'none',
				smooth: true,
				lineStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#0675FF'
					}, {
						offset: 1,
						color: '#8706FF'
					}])//线条渐变色
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#0675FF'
					}, {
						offset: 1,
						color: '#8706FF'
					}]),
					opacity: 0.1
				}
			}]
		};
		teamChart.setOption(teamOption);

		//新增会员
		var memberChart = echarts.init(document.getElementById('member'));
		// 指定图表的配置项和数据
		var memberOption = {
			xAxis: {
				type: 'category',
				data: data
			},
			yAxis: {
				type: 'value'
			},
			tooltip: {
				trigger: 'axis',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: function(params, ticket, callback) {
					return "日期：" + params[0].axisValue + '<br />' + params[0].seriesName + "：" + params[0].value;
				},
			},
			series: [{
				name: ['新增会员数'],
				data: init_data,
				type: 'line',
				symbol: 'none',
				smooth: true,
				lineStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#FF6706'
					}, {
						offset: 1,
						color: '#FF1D06'
					}])//线条渐变色
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#FF6706'
					}, {
						offset: 1,
						color: '#FF1D06'
					}]),
					opacity: 0.1
				}
			}]
		};
		memberChart.setOption(memberOption);

		$.ajax({
			type: 'POST',
			dataType: 'JSON',
			url: ns.url("shop/index/tenDayStat"),
			success: function (res) {
				if (res.code >= 0) {
					numOption.series[0].data = res.data.order_pay_count;
					orderNumChart.setOption(numOption);

					moneyOption.series[0].data = res.data.order_total;
					moneyChart.setOption(moneyOption);

					teamOption.series[0].data = res.data.leader_count;
					teamChart.setOption(teamOption);

					memberOption.series[0].data = res.data.member_count;
					memberChart.setOption(memberOption);
				}
			}
		})

	}

	/**
	 * 排行榜
	 */
	function randStat() {
		//团长
		var teamLegendData = [], teamSeriesData = [];
		var teamMoneyChart = echarts.init(document.getElementById('team_money'));
		var teamMoneyOption = {
			tooltip: {
				trigger: 'item',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: "{b}: {c}元",
			},
			legend: {
				type: 'plain',
				orient: 'vertical',
				right: 60,
				top: 20,
				bottom: 20,
				itemGap: 15,
				itemWidth: 20,
				itemHeight: 10,
				textStyle: {
					color: '#262626',
					fontSize: 14
				},
				selectedMode: false,
				data: teamLegendData,
			},
			color : [ '#FF914C', '#4C97FF', '#BB4CFF', '#FFA94C', '#F24968', '#496BF2', '#FF734C', '#E846EB', '#4BB4FA', '#FA8B4B' ],
			series: [{
				name: '姓名',
				data: teamSeriesData,
				type: 'pie',
				radius: '50%',
				center: ['30%', '55%']
			}]
		};

		//商品
		var goodsLegendData = [], goodsSeriesData = [];
		var goodsMoneyChart = echarts.init(document.getElementById('goods_money'));
		var goodsMoneyOption = {
			tooltip: {
				trigger: 'item',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: "{b}: {c}",
			},
			legend: {
				type: 'plain',
				orient: 'vertical',
				width: 10,
				right: 60,
				top: 20,
				itemGap: 15,
				itemWidth: 20,
				itemHeight: 10,
				formatter: function(name) {
					return name.length>10?name.substr(0,10)+"...":name;
				},
				textStyle: {
					color: '#262626',
					fontSize: 14,
				},
				selectedMode: false,
				data: goodsLegendData,
			},
			color : [ '#FF914C', '#4C97FF', '#BB4CFF', '#FFA94C', '#F24968', '#496BF2', '#FF734C', '#E846EB', '#4BB4FA', '#FA8B4B' ],
			series: [{
				name: '姓名',
				data: goodsSeriesData,
				label: {
					width: 200,
					formatter: function(params) {
						return params.name.length>10?params.name.substr(0,10)+"...":params.name;
					},
					rich: {
						a: {
							width: 200
						}
					}
				},
				type: 'pie',
				radius: ['35%', '50%'],
				center: ['30%', '55%']
			}]
		};

		$.ajax({
			type: 'POST',
			dataType: 'JSON',
			url: ns.url("shop/index/randStat"),
			success: function (res) {
				if (res.code >= 0) {
					//团长
					for (var i = 0; i < res.data.leader.length; i++) {
						if (i < 10) {
							let name = res.data.leader[i].name;
							teamLegendData.push(name);
							teamSeriesData.push({
								name: name,
								value: res.data.leader[i].order_complete_money
							});
						}
					}
					teamMoneyOption.legend.data = teamLegendData;
					teamMoneyOption.series[0].data = teamSeriesData;
					teamMoneyChart.setOption(teamMoneyOption);

					//商品
					for (var i = 0; i < res.data.goods.length; i++) {
						if (i < 10) {
							name = res.data.goods[i].goods_name;
							goodsLegendData.push(name);
							goodsSeriesData.push({
								name: name,
								value: res.data.goods[i].sale_num
							});
						}
					}

					goodsMoneyOption.legend.data = goodsLegendData;
					goodsMoneyOption.series[0].data = goodsSeriesData;
					goodsMoneyChart.setOption(goodsMoneyOption);

				}
			}
		})

	}


</script>
{/block}
